import { services } from '../data';
import Link from 'next/link';

// 这个函数告诉Next.js哪些路径需要在构建时预渲染
export function generateStaticParams() {
  return services.map((service) => ({
    id: service.id.toString(),
  }));
}

// 添加元数据
export function generateMetadata({ params }: { params: { id: string } }) {
  const serviceId = parseInt(params.id);
  const service = services.find(s => s.id === serviceId);
  
  if (!service) {
    return {
      title: '服务未找到 | 余莉莎',
    };
  }
  
  return {
    title: `${service.title} | 余莉莎`,
    description: service.description,
  };
}

export default function ServicePage({ params }: { params: { id: string } }) {
  const serviceId = parseInt(params.id);
  const service = services.find(s => s.id === serviceId);

  if (!service) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-3xl font-bold text-primary-600 mb-4">服务未找到</h1>
          <p className="mb-6">抱歉，您所查找的服务不存在。</p>
          <Link href="/" className="btn-primary">
            返回首页
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen py-12">
      <div className="container mx-auto px-4">
        <div className="mb-8">
          <Link href="/#services" className="text-primary-600 hover:text-primary-700 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
            </svg>
            返回业务板块
          </Link>
        </div>

        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="bg-primary-500 text-white p-8">
            <div className="text-6xl mb-4">{service.icon}</div>
            <h1 className="text-3xl md:text-4xl font-bold">{service.title}</h1>
          </div>
          
          <div className="p-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">服务概述</h2>
            <p className="text-gray-700 mb-8 leading-relaxed">
              {service.longDescription}
            </p>

            <h2 className="text-2xl font-semibold text-gray-800 mb-4">服务内容</h2>
            <ul className="space-y-3 mb-8">
              {service.features.map((feature, index) => (
                <li key={index} className="flex items-start">
                  <span className="text-primary-500 mr-2">✓</span>
                  <span className="text-gray-700">{feature}</span>
                </li>
              ))}
            </ul>

            <div className="flex justify-center mt-8">
              <Link href="/#contact" className="btn-primary">
                了解更多详情
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 